import React, { Component } from "react";
import { View, Button, Text } from "@tarojs/components";
import VirtualList from "@tarojs/components/virtual-list/react";
import FixedSizeList from "@tarojs/components/virtual-list/react/FixedSizeList";
import createListComponent from "@tarojs/components/virtual-list/react/createListComponent";

import { observer, inject } from "mobx-react";

import "./index.scss";

function buildData(offset = 0) {
  return Array(100)
    .fill(0)
    .map((_, i) => i + offset);
}

const Row = React.memo(({ index, style, data }) => {
  return (
    <View className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      Row {index}
    </View>
  );
});

@inject("store")
@observer
class Index extends Component {
  state = {
    data: buildData(0)
  };
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    const {
      counterStore: { counter }
    } = this.props.store;
    const { data } = this.state;
    const dataLen = data.length;
    return (
      <VirtualList
        height={500} /* 列表的高度 */
        width="100%" /* 列表的宽度 */
        itemData={data} /* 渲染列表的数据 */
        itemCount={dataLen} /*  渲染列表的长度 */
        itemSize={100} /* 列表单项的高度  */
      >
        {Row}
      </VirtualList>
    );
  }
}

export default Index;
